{% extends "../layouts/admin.html" %} {% block content %}
<header class="header navbar bg-white shadow">

	<div class="pull-right">
		<button class="btn btn-primary navbar-btn" onclick="sublime.toggleFilter('.cd-panel')"><i
        class="fa fa-sliders"></i> 筛选
    </button>
	</div>
</header>
<div class=panel-body style="padding-top: 50px;">
	<div class="table-responsive no-border">
	
		<table class="table table-bordered table-striped mg-t datatable">
			<thead>
				<tr>
					<th>ID</th>
					<th>用户ID</th>
					<th>姓名</th>
					<th>邮箱/手机号</th>
					<th>反馈标题</th>
					<th>反馈类型</th>
					<th>反馈内容</th>
					<th>反馈图片</th>
					<th>关联订单号</th>
					<th>待回复</th>
					<th>创建时间</th>
					<th>操作</th>
		</table>
	</div>
</div>
<div class="cd-panel from-right">
	<header class="cd-panel-header">
		<h4>高级筛选</h4>
	</header>
	<div class="cd-panel-container">
		<div class="cd-panel-content shadow">
			<div class="form-group">
				<label for="keyword">关键词</label>
				<input type="text" id="keyword" name="keyword" onclick="this.value=''" class="form-control" placeholder="关键词">
			</div>
			<div class="form-group">
				<label for="content">用户ID</label>
				<input type="text" id="userid" name="userid" onclick="this.value=''" class="form-control" placeholder="用户ID">
			</div>
			<button id="searchBtn" type="button" class="btn btn-default">查询</button>
		</div>
	</div>
</div>
<div id="dialogDetail" class="modal fade bs-modal" tabindex="-3" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
		</div>
	</div>
</div>
<script language="JavaScript">
	var datatable;

	function initDatatable() {
		datatable = $('.datatable').DataTable({
			"dom": '<"toolbar">frtip',
			"searching": false,
			"processing": false,
			"serverSide": true,
			"select": true,
			"ordering": true,
			"language": {
				"url": "/assets/plugins/datatables/cn.json"
			},
			"preDrawCallback": function() {
				sublime.showLoadingbar($(".main-content"));
			},
			"drawCallback": function() {
				sublime.closeLoadingbar($(".main-content"));
			},
			"ajax": {
				"url": "/store/feedback/index",
				"type": "post",
				"data": function(d) {

					        d.keyword = $('#keyword').val();
					       d.userid=$('#userid').val();
				}
			},
			"order": [
				[0, "desc"]
			],
			"columns": [

				{
					"data": "id",
					"bSortable": true
				},
				{
					"data": "user_id",
					"bSortable": true
				},
				{
					"data": "user_name",
					"bSortable": true
				},
				{
					"data": "mobile_email",
					"bSortable": true
				},
				{
					"data": "title",
					"bSortable": true
				},
				{
					"data": "type",
					"bSortable": true
				},
				{
					"data": "content",
					"bSortable": true
				},
				{
					"data": "pics_url",
					"bSortable": true
				},
				{
					"data": "order_id",
					"bSortable": true
				},
				{
					"data": "status",
					"bSortable": true
				},
				{
					"data": "create_time",
					"bSortable": true
				}

			],
			"columnDefs": [{
					"render": function(data, type, row) {
						if(data) {
							return new Date(parseInt(data)).format("yyyy-MM-dd hh:mm:ss");
						}
						return '';
					},
					"targets": 10
				},
				{
					"render": function(data, type, row) {
						
						if(data){
						var pics = data.split(",");
						var imgs = "";
						for (var i=0;i<pics.length;i++) {
							
							imgs += "<img src='"+pics[i]+"' onclick=picture('"+pics[i]+"')>"
						}
						 return imgs;
						}else{
							return "无";
						}
					},
					"targets": 7
				},
				
				{
					"render": function(data, type, row) {
						if(data == 0) {
							return '无'
						}
						return data;
					},
					"targets": 8
				},
				{
					"render": function(data, type, row) {
						if(data == 1) {
							return '<i id="disable_' + row.id + '" class="fa fa-circle text-success ml5"></i>';
						} else {
							return '<i id="disable_' + row.id + '" class="fa fa-circle text-danger ml5"></i>';
						}
					},
					"targets": 9
				},
				{
					"render": function(data, type, row) {
						var str = '<div class="btn-group"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">' +
							' <i class="ti-settings"></i> <span class="ti-angle-down"></span></button><ul class="dropdown-menu" role="menu">';

						str += '<li><a href="/store/feedback/reply?id=' + row.id + '&type=1"  data-toggle="modal" data-target="#dialogDetail">回复</a></li>';

						str += '<li><a href="/store/feedback/reply?id=' + row.id + '&type=0"  data-toggle="modal" data-target="#dialogDetail">查看</a></li>' +
							'</ul></div>';
						return str;
					},
					"targets": 11
				}
			]
		});
		
		$("#searchBtn").on('click', function() {
			datatable.ajax.reload();
		});
	}
	$(function() {
		initDatatable();

		$("#dialogDetail").on("hidden.bs.modal", function() {
			$(this).removeData("bs.modal");
		});
		
	});
	
	function picture(img){
   	layer.open({
   		type:1,
   		title:false,
   		area: ['700px', '500px'],
		content: "<img src='" +img+ "' class='pic'/>"
   	});
   }
</script>
{% endblock %}